<template>
    <!-- <van-row class="tabbar" gutter="0">
      <van-col
        v-for="(item, index) in routerList"
        :key="item.path"
        :span="1"
        @click="switchTab(item.path)"
        class="tab-item"
      >
        <span :class="isActive(item.path) ? 'active' : ''">{{ item.title }}</span>
      </van-col>
    </van-row> -->
    <router-view />

<van-tabbar route>
  <van-tabbar-item replace to="/home" icon="bag-o">商城</van-tabbar-item>
  <van-tabbar-item replace to="/Live" icon="apps-o">分类</van-tabbar-item>
  <van-tabbar-item replace to="/shopping" icon="shopping-cart-o">购物车</van-tabbar-item>
  <van-tabbar-item replace to="/My" icon="contact-o">我的</van-tabbar-item>
</van-tabbar>
  </template>
  
  <script setup>
//   import { ref } from 'vue';
//   import { useRouter, useRoute } from 'vue-router';
//   import { Row, Col } from 'vant';
  
//   const router = useRouter();
//   const route = useRoute();
//   const routerList = ref([
//     { title: '首页', path: '/home' },
//     { title: '分类', path: '/live' },
//     { title: '购物车', path: '/shopping' },
//     { title: '我的', path: '/my' }
//   ]);
  
//   // 使用精确匹配来判断当前路由是否激活
//   const isActive = (path) => {
//     return route.path === path;
//   };
  
//   const switchTab = (path) => {
//     router.replace(path);
//   };
  </script>
  
  <style scoped>
body{
    margin: 0;
    padding: 0;
}

  </style>
  
 